<template>
  <div class="SearchResult-box">
    <!-- 顶部 -->
    <div class="SearchResult-top">
      <van-search
        v-model="keyword"
        shape="round"
        placeholder="请输入搜索关键词"
        show-action
      >
        <template #left>
          <van-icon name="arrow-left" size="18" @click="GoBack" />
        </template>
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- 自定义菜单 -->
      <van-dropdown-menu>
      <!--  -->
      <van-dropdown-item v-model="value1" :options="option1"  @change="getSort"/>
      <!--  -->
      <van-dropdown-item title="筛选" ref="item">
        <div class="shaixuan" style="display: flex">
          <van-cell-group>
            <van-field v-model="value3" label="" placeholder="最低价格" />
          </van-cell-group>
          <van-cell-group>
            <van-field v-model="value4" label="" placeholder="最高价格" />
          </van-cell-group>
        </div>
        <van-button
          @click="getFilter"
          round
          color="red"
          type="primary"
          size="large"
          style="height: 40px"
          >确认</van-button
        >
      </van-dropdown-item>
    </van-dropdown-menu>
    </div>
    <!-- 商品列表 -->
    <div class="goodsList">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            v-for="(item, index) in goodsList"
            :key="index"
            @click="goGoodsDetail(item.proid)"
            class="result-list"
          >
            <div class="image">
              <img :src="item.img1" alt="" />
            </div>
            <div class="introduce">
              <p class="text">{{ item.proname }}</p>
              <p>￥{{ item.originprice }}</p>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchResult",
  data() {
    return {
      keyword: "",
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ],
      /* 商品列表 */
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      goodsList: [],
      /* 最近搜索 */
      recentlySearch: JSON.parse(localStorage.getItem("recentlySearch")) || [],
      /* 筛选 */
      show: false,
      value: "",
      value1: 0,
      value2: "a",
      value3: 0,
      value4: 999,
      arr:[],
      option1: [
        { text: "全部商品", value: 0 },
        { text: "价格升序", value: 1 },
        { text: "价格降序", value: 2 },
      ],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  created() {
    // console.log(this.$route.query.brand);
    /* 从搜索框获取关键字 */
    if (!this.$route.query.brand) {
      let keyword = this.$route.query.keyword;
      this.service({
        url: "/pro/search",
        params: {
          count: this.pageIndex,
          limitNum: 10,
          keyword,
        },
      }).then((res) => {
        // console.log(res);
        // console.log(res.data.data);
        this.goodsList = res.data.data;
      });
    } else {
      this.service({
        url: "/pro/categorybrandprolist",
        params: {
          count: 1,
          limitNum: 10,
          category: this.$route.query.category,
          brand: this.$route.query.brand,
        },
      }).then((res) => {
        this.goodsList = res.data.data;
      });
    }
    // 搜索 获取关键字
    /* this.service({
        url: "/pro/search",
        params: {
          count: this.pageIndex,
          limitNum: 10,
          keyword: this.keyword
        },
      })
      .then (res=>{
        // console.log(res);
        // console.log(res.data.data);
        this.goodsList = res.data.data;
      }) */
  },
  methods: {
    GoBack() {
      this.$router.go(-1);
    },
    onSearch() {
      this.service({
        url: "/pro/search",
        params: {
          count: this.pageIndex,
          limitNum: 10,
          keyword: this.keyword,
        },
      }).then((res) => {
        // console.log(res);
        // console.log(res.data.data);
        this.goodsList = res.data.data;
      });
      if (this.keyword) {
        let exist = this.recentlySearch.indexOf(this.keyword);
        if (exist == -1) {
          this.recentlySearch.unshift(this.keyword);
          localStorage.setItem(
            "recentlySearch",
            JSON.stringify(this.recentlySearch)
          );
          console.log("this.recently", this.recently);
        } else {
          this.recentlySearch.splice(exist, 1);
          this.recentlySearch.unshift(this.keyword);
          localStorage.setItem(
            "recentlySearch",
            JSON.stringify(this.recentlySearch)
          );
        }
      } else {
        return;
      }
    },
    onConfirm() {
      this.$refs.item.toggle();
    },
    /* 商品列表 */
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    /* 添加最近搜索 */
    /* 去详情页 */
    goGoodsDetail(goodsid) {
      this.$router.push({ name: "/GoodsDetail", params: { goodsid } });
    },
     //价格筛选
     getFilter() {
      this.$refs.item.toggle();
      // this.arr= this.goodsList
      let arr = [...this.goodsList];
      console.log("333", this.value3);
      let a = this.value3;
      let b = this.value4;
      console.log("444", this.value4);
      console.log("this.goodsList",this.goodsList);
      this.goodsList = arr.filter((item, index) => {
        if (a <= item.originprice&&item.originprice <= b) {
          return item
        }
      });
     
    },
    //价格升序
    getSort(value) {
      this.arr = this.goodsList;
      // let arr = [...this.searchlist];
      
      if (value == 1) {
        //价格升序
        this.goodsList = this.arr.sort((a, b) => {
          return a.originprice - b.originprice;
        });
      } else if (value == 2) {
        //价格降序
        this.goodsList = this.arr.sort((a, b) => {
          return b.originprice - a.originprice;
        });
      }  else if (value == 0) {
          this.goodsList= this.arr
        }
    },
  },
};
</script>

<style scoped>
.SearchResult-box {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}
.goodsList {
  flex: 1;
  overflow: auto;
}
.result-list {
  width: 100%;
  height: 4.75rem;
  display: flex;
  margin: 0.9375rem 0;
}
.image {
  width: 5.5rem;
  height: 5.5rem;
  margin-right: 0.9375rem;
}
.image img {
  width: 100%;
  height: 100%;
  /* width: 45%; */
}
.introduce {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.text {
  font-size: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  widows: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
</style>